import { ProCard, ProDescriptions } from "@ant-design/pro-components";
import { Avatar, Col, List, Row, Space, Typography } from "antd";
import React, { useState } from "react";
import CardBg from "@/assets/card_bg.svg";
const data = [
	{
		title: "Ant Design Title 1"
	},
	{
		title: "Ant Design Title 2"
	},
	{
		title: "Ant Design Title 3"
	},
	{
		title: "Ant Design Title 4"
	}
];
const InfoCenter: React.FC = () => {
	const [tab, setTab] = useState("login");
	return (
		<>
			<Row gutter={[16, 16]}>
				<Col xs={24} md={24} xl={17} lg={17}>
					<ProCard ghost gutter={[16, 16]} wrap>
						<ProCard
							colSpan={24}
							bodyStyle={{
								background: `url(${CardBg}) no-repeat`,
								backgroundPosition: "center",
								borderRadius: "6px",
								backgroundSize: "150%"
							}}
						>
							<Space align="center">
								<Typography.Title style={{ marginBottom: "0px", color: "white" }} level={4}>
									Hi，Herther
								</Typography.Title>
								<Typography style={{ marginTop: 6, color: "white" }}>下午好，今天是你加入的第 100 天～ </Typography>
							</Space>
						</ProCard>
						<ProCard colSpan={24}>
							<ProDescriptions
								title="我的信息"
								colon={false}
								request={async () => {
									return Promise.resolve({
										success: true,
										data: {
											date: "20200809",
											money: "1212100",
											money2: -12345.33,
											state: "all",
											switch: true,
											state2: "open"
										}
									});
								}}
								layout="vertical"
								emptyText={"空"}
								columns={[
									{
										title: "手机",
										key: "text",
										dataIndex: "phone"
									},
									{
										title: "邮箱",
										key: "text",
										dataIndex: "phone"
									},
									{
										title: "时间",
										key: "date",
										dataIndex: "date",
										valueType: "date"
									},
									{
										title: "入职时间",
										key: "date",
										dataIndex: "date",
										valueType: "date",
										fieldProps: {
											format: "DD.MM.YYYY"
										}
									},
									{
										title: "职称",
										key: "money2",
										dataIndex: "money2",
										valueType: "money",
										fieldProps: {
											moneySymbol: false
										}
									}
								]}
							>
								<ProDescriptions.Item dataIndex="percent" label="百分比" valueType="percent">
									100
								</ProDescriptions.Item>
							</ProDescriptions>
						</ProCard>
						<ProCard colSpan={24}>
							<ProCard
								bodyStyle={{ padding: "0px" }}
								style={{ padding: "0px" }}
								tabs={{
									activeKey: tab,
									items: [
										{
											label: `登录日志`,
											key: "login",
											children: <>12312</>
										},
										{
											label: `操作日志`,
											key: "oper",
											children: `内容二`
										}
									],
									onChange: key => {
										setTab(key);
									}
								}}
							/>
						</ProCard>
					</ProCard>
				</Col>
				<Col xs={24} md={24} xl={7} lg={7}>
					<ProCard ghost gutter={[16, 16]} wrap>
						<ProCard colSpan={24} style={{ minHeight: "220px", background: "#1677ff" }}>
							<div style={{ marginBottom: "20px" }}>
								<Avatar size={85} style={{ background: "#d9e1ff" }}>
									<span
										style={{
											fontSize: "40px",
											color: "#006aff",
											fontWeight: "500",
											lineHeight: "85px"
										}}
									>
										H
									</span>
								</Avatar>
							</div>
							<div
								style={{
									display: "flex",
									justifyContent: "flex-start",
									flexDirection: "column"
								}}
							>
								<Typography.Title level={3} style={{ color: "white" }}>
									Herther
								</Typography.Title>
								<Typography style={{ color: "white" }}>XXG 港澳业务拓展组员工 直客销售</Typography>
							</div>
						</ProCard>
						<ProCard colSpan={24} title="我的团队成员">
							<List
								itemLayout="horizontal"
								dataSource={data}
								renderItem={(item, index) => (
									<List.Item>
										<List.Item.Meta
											avatar={<Avatar size={50} src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
											title={<a href="https://ant.design">{item.title}</a>}
											description="Ant Design, a design languagem"
										/>
									</List.Item>
								)}
							/>
						</ProCard>
					</ProCard>
				</Col>
			</Row>
		</>
	);
};
export default InfoCenter;
